<template>
  <header class="navbar">
    <div class="navbar-container">
      <!-- Logo -->
      <div class="navbar-logo">
        <img src="@/assets/images/logo.png" alt="友福同享Logo" class="navbar-logo-icon" />
        <img src="@/assets/images/logo-mini.png" alt="友福同享Logo" class="navbar-logo-mini" />
        <!--        <span>友福同享</span>-->
      </div>

      <!-- 导航菜单 -->
      <nav class="navbar-menu">
        <div
          v-for="(item, index) in navItems"
          :key="index"
          class="menu-item"
          :class="{ active: isActive(item.path) }"
          @click="handleNavigate(item.path)"
        >
          {{ item.label }}
        </div>
      </nav>

      <!-- 语言切换 -->
      <!--      <div class="language-switch"><span>中文</span></div>-->
      <div class="language-switch" @click="changeLanguage">
        <!--        <span>English</span> | <span>中文</span> | <span>繁體</span>-->
      </div>
    </div>
  </header>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import { ElNotification } from 'element-plus'
// import { computed } from 'vue'

const router = useRouter()

// 导航数据
const navItems = [
  { path: '/', label: '首页' },
  { path: '/news', label: '友福动态' },
  { path: '/network', label: 'AI健康' },
  { path: '/dating', label: 'AI婚恋' },
  { path: '/app', label: '友福同享APP' },
  { path: '/ecosystem', label: '生态合作' },
  { path: '/about', label: '关于我们' }
]
const changeLanguage = () => {
  ElNotification({
    title: '系统提示',
    message: '翻译文件正在处理中，请稍后重试～',
    type: 'primary'
  })
}
// 跳转方法
const handleNavigate = (path: string) => {
  console.log(path)
  router.push(path)
}

// 判断是否为激活状态
const isActive = (path: string) => {
  return router.currentRoute.value.path === path
}
</script>

<style scoped lang="less">
// 导航栏容器
.navbar {
  display: flex;
  width: 1920px;
  padding: 28px 100px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(25px);
  z-index: 999;
  overflow: hidden;
}

.navbar-logo {
  width: 160px;
  height: 29px;
  //position: absolute;
  //top: 0;
  //left: 0;
}

.navbar-logo-mini {
  display: none;
  //width: 72px;
  //height: 72px;
  //position: absolute;
  //top: 0;
  //left: 0;
}

// 导航容器（居中）
.navbar-container {
  width: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
}

// 导航菜单
.navbar-menu {
  margin-left: 260px;
  display: flex;
  gap: 60px;

  // 单个菜单项（关键动画容器）
  .menu-item {
    position: relative;
    color: #333;
    font-size: 16px;
    padding: 10px 0;
    cursor: pointer;
    transition: color 0.3s ease;

    // 下划线动画（核心）
    &::after {
      content: '';
      position: absolute;
      left: 0;
      bottom: 0;
      width: 0;
      height: 4px;
      border-radius: 10px;
      background: @primary-color;
      transition: width 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    }

    // 激活态/ hover 态
    &.active,
    &:hover {
      //&.active {
      font-weight: bold;
      color: @primary-color;

      &::after {
        width: 100%; // 下划线展开
      }
    }
  }
}

// 语言切换（可选动画）
.language-switch {
  width: 150px;
  color: @text-color;
  font-size: @font-size-md;
  transition: color 0.3s ease;

  &:hover {
    color: #007bff;
  }
}

// 响应式适配
//@media (max-width: @tablet-breakpoint) {

@media (max-width: 768px) {
  .navbar-container {
    width: 90%;
    height: 56px;
    .navbar-logo-icon {
      display: none;
    }
    .navbar-logo-mini {
      display: inline-block;
    }
    .navbar-logo {
      width: 36px;
      height: 36px;
    }
  }
}
</style>
